<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间综合练习</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!--1、导入vue.js，在window全局中就有了vue的构造函数（就和导入jQuery，window全局就有$可以使用一样）-->
    <script src="../js/vue_2.7.8.js" ></script>

</head>
<body>

<!--2、写希望让vue控制的html区域-->
<div id="app">
    <br/>
    <br/>
    <form @submit.prevent="add" class="form-inline">
        <div class="form-group">
            <input type="text" v-model="brand" class="form-control" placeholder="请填写要添加的品牌">
            <button class="btn btn-default" type="submit">Button</button>
        </div>
    </form>
    <hr>
    <table class="table table-bordered table-hover table-striped">
        <thead>
            <th>id</th>
            <th>品牌</th>
            <th>状态</th>
            <th>时间</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr v-for="item in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.brand}}</td>
                <td>
                    <input type="checkbox" v-model="item.showStatus" :id="'cb'+item.id">
                    <label :for="'cb'+item.id" v-if="item.showStatus">已启动</label>
                    <label :for="'cb'+item.id" v-else>未启动</label>
                </td>
                <td>{{item.time}}</td>
                <td>
                    <a href="javascript:;" @click="del(item.id)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>
<script>

    //3.创建vue对象，并渲染dom
    new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el:"#app",
        //data是要渲染的数据
        data:{
            brand:'',
            nextId:3,
            list:[
                {id:1,brand:'宝马',showStatus:false,time:new Date()},
                {id:2,brand:'奔驰',showStatus:true,time:new Date()},
            ]
        },
        methods:{
            del(id){
                this.list = this.list.filter(item=>item.id!==id);
            },
            add(){
                if (this.brand===''){
                    return;
                }
                this.list.push({
                    id:this.nextId,
                    brand:this.brand,
                    showStatus:false,
                    time:new Date()
                });
                this.brand='';
                this.nextId=this.nextId+1;
            }
        }
    });

</script>
